<template>
	<view class="container page-details">
		<view class="page-store-info">
			<!-- 轮播图 -->
			<view class="module-slide" ref="imgSwiper">
				<swiper
					class="swiper"
					:indicator-dots="indicatorDots"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
					@change="handleSwiper"
				>
					<swiper-item v-for="item in swiperList" :key="item.id">
						<view class="swiper-item">
							<!-- <image :src="img" mode="heightFix"></image> -->
						</view>
					</swiper-item>
				</swiper>
				<span class="swiper-tips">{{ curSwiper }}/{{ swiperList.length }}</span>
			</view>
			<!-- 轮播图 -->

			<view class="module-shop">
				<view class="module-shop-content">
					<image :src="storeImg" class="shop-logo"></image>
					<view class="shop-content">
						<view class="shop-name">微企生鲜集团</view>
						<view class="shop-tips">国际著名海鲜品牌</view>
						<view class="shop-tips">广州 1000</view>
						<view class="shop-button">
							关注
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="module-product">
			<view class="content" :class="{ 'product-top': isProductTop }">
				<scroll-view
					class="menu-wrapper"
					scroll-y
					@scrolltoupper="handleProductUpper"
					scroll-with-animation="true"
					scroll-top="100"
				>
					<view class="left-content">
						<view
							style="position: relative;"
							v-for="(item, index) in goods"
							:key="index"
							ref="menuList"
							@click="select(index)"
							:class="{ current: currentIndex == index }"
						>
							<view class="menu-item">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 右侧滚动 -->
				<scroll-view
					class="foods-wrapper"
					scroll-y
					:style="'height:100%'"
					:scroll-top="foodSTop"
					@scroll="myscroll"
					@scrolltoupper="handleProductUpper"
					scroll-with-animation="true"
				>
					<view ref="foodsWrapper">
						<view
							ref="foodList"
							class="foods"
							v-for="(item, i) in goods"
							:key="i"
						>
							<view class="food-title" style="background: #f3f5f7;">
								{{ item.name }}
							</view>
							<view
								class="media"
								v-for="(food, index) in item.foods"
								:key="index"
							>
								<navigator
									class="media-object"
									:url="'../details/index?id=' + item.id"
									><image class="media-object" src=""></image
								></navigator>
								<view class="media-content">
									<navigator
										class="media-title"
										:url="'../details/index?id=' + item.id"
										>{{ food.title }}</navigator
									>
									<view class="media-tips">月售：10</view>
									<view class="media-price">
										￥{{ food.price }}
										<button
											type="main"
											class="button-add"
											@tap="handleOpenSku(food)"
										>
											+
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- sku选择弹窗组件 -->
		<uniPopup ref="popupSku" type="center" class="popup-sku popup-sku-store">
			<popupSku
				:list="skuList"
				:selectArr="selectArr"
				:productInfo="curProduct"
				@addCart="handleAddCart"
			></popupSku>
		</uniPopup>
		<!-- sku选择弹窗组件 -->

		<!-- 商铺购物车弹窗组件 -->
		<uniPopup ref="popupStoreCart" type="bottom" class="popup-store-cart">
			<storeCart
				:shopId="resData.shopid"
				:storeAllTotal="storeAllTotal"
				:storeGoodsList="storeGoodsList"
				:shopCartIndex="shopCartIndex"
				@deleteGoods="deleteGoods"
			></storeCart>
		</uniPopup>
		<!-- 商铺购物车弹窗组件 -->

		<goodsNav
			class="store-goods-nav fixed-bottom"
			:options="navGroup"
			:button-group="buttonGroup"
			:total="storeAllTotal"
			@click="handleNavLeft"
			@buttonClick="handleNavRight"
		></goodsNav>
		<!-- 底部菜单组件 -->

		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
		<flyInCart ref="carAnmation" cartx="0.25" carty="1.1"></flyInCart>
	</view>
</template>

<script>
// 引入组件
import popupSku from '@/pages/components/popup-sku/popup-sku.vue';
import goodsNav from '@/pages/components/goods-nav/goods-nav.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import flyInCart from '@/components/fly-in-cart/fly-in-cart.vue';
import storeCart from './storecart/index.vue';
export default {
	components: {
		// 声明组件
		popupSku,
		goodsNav,
		uniPopup,
		flyInCart,
		storeCart,
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			curSwiper: 1,
			swiperList: [
				{
					id: '1',
				},
				{
					id: '2',
				},
				{
					id: '3',
				},
			],
			storeImg: '../../../static/img/img_store.png',
			selectArr: [
				{
					parentId: 2,
					name: '白色',
					count: 0,
				},
			],
			skuList: [
				{
					name: '颜色',
					muster: [
						{
							parentId: 2,
							name: '白色',
							count: 0,
						},
						{
							parentId: 2,
							name: '黑色',
							count: 10,
						},
						{
							parentId: 2,
							name: '绿色',
							count: 20,
						},
					],
				},
				{
					name: '码数',
					muster: [
						{
							parentId: 3,
							name: 'X',
							count: 10,
						},
						{
							parentId: 3,
							name: 'L',
							count: 10,
						},
						{
							parentId: 3,
							name: 'XL',
							count: 10,
						},
					],
				},
			],
			specClass: '',
			navGroup: [
				{
					icon: 'iconbangwozhaopuiconzhong',
					text: '联系商家',
				},
				{
					icon: 'icongouwuche',
					text: '购物车',
					info: '',
				},
			],
			buttonGroup: [
				{
					text: '去结算',
					backgroundColor: '#FFA847',
					color: '#fff',
				},
			],
			resData: {
				title: '日本新鲜进口三文鱼',
				price: 80,
				thumb: '',
				count: 1,
				tips: '当天送达',
				id: 1,
				shop: '广州市直营店',
				shopid: 6,
			},
			title: 'Hello',
			goods: [
				{
					name: '水果蔬菜',
					foods: [
						{
							title: '五常大米300g',
							price: 30,
							thumb: '',
							tips: '很新鲜',
							id: 100,
							count: 1,
						},
						{
							title: '花生300g',
							price: 40,
							thumb: '',
							tips: '很新鲜',
							id: 150,
							count: 1,
						},
						{
							title: '花生油300g',
							price: 40,
							thumb: '',
							tips: '很新鲜',
							id: 200,
							count: 1,
						},
						{
							title: '大豆300g',
							price: 40,
							thumb: '',
							tips: '很新鲜',
							id: 250,
							count: 1,
						},
					],
				},
				{
					name: '鱼肉蛋禽',
					foods: [
						{
							id: 40,
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: 41,
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
					],
				},
				{
					name: '休闲零食',
					foods: [
						{
							id: 50,
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: 51,
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
					],
				},
				{
					name: '熟食面点',
					foods: [
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
					],
				},
				{
					name: '牛奶面包',
					foods: [
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
						{
							id: '57',
							title: '新鲜芥蓝',
							cover:
								'http://www.yllook.com/attachment/images/2019/12/24/image_157717026899975254.jpg',
							price: '800',
							postage: '15',
							count: 12,
						},
					],
				},
			],

			windowsHeight: 0, // 屏幕高度
			foodSTop: 0, // 右侧的滑动值
			currentIndex: 0,
			last: 0,
			rightHeight: [], // 右侧每个内容的高度集合
			selectIndex: 0,
			leftIndex: 0, // 左侧总高度
			leftScroll: 0, // 左侧滑动值
			catrgoryList: [],
			timeout: null,
			storeGoodsList: [],
			shopCartIndex: -1,
			curProduct: {},
			isProductTop: false,
		};
	},
	computed: {
		storeAllTotal() {
			return this.getStoreAllTotal();
		},
		goodsList() {
			return this.$store.getters.goodsList;
		},
		allTotal() {
			return this.$store.getters.allTotal;
		},
	},
	onLoad(options) {
		this.resData.shopid = Number(options.id);
		this.goodsList.forEach((item, index) => {
			if (item.id === this.resData.shopid) {
				this.storeGoodsList.push(item);
				this.shopCartIndex = index;
			}
		});
		this.windowsHeight = Number(uni.getSystemInfoSync().windowHeight) - 55;
		setTimeout(() => {
			this.getHeightList();
		}, 1000);

		setTimeout(() => {
			this.selectArr = [
				{
					parentId: 2,
					name: '白色',
					count: 10,
				},
			];
			this.skuList.map((item) => {
				item.muster.map((itemMuster) => {
					this.selectArr.map((itemSelect) => {
						if (itemSelect.name === itemMuster.name) {
							this.$set(itemMuster, 'isActive', true);
						} else {
							this.$set(itemMuster, 'isActive', false);
						}
					});
				});
			});
		}, 1000);
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.isProductTop = true;
		}
	},
	methods: {
		getStoreAllTotal() {
			const total = {
				count: 0,
				price: 0,
				checkCount: 0,
				productNum: 0,
				allCount: 0,
			};
			// 遍历店铺
			this.goodsList.forEach((item, index) => {
				if (item.id === this.resData.shopid) {
					// 遍历商品
					item.product.forEach((itemProduct, indexProduct) => {
						total.productNum += 1;
						total.allCount += itemProduct.count;
						if (itemProduct.checked) {
							// 累加的总数量和总价格
							total.checkCount += 1;
							total.count += itemProduct.count;
							total.price += itemProduct.count * itemProduct.price;
						}
					});
				}
			});
			this.navGroup[1].info = total.productNum;
			if (total.checkCount <= 0) {
				this.buttonGroup[0].backgroundColor = '#ccc';
			} else {
				this.buttonGroup[0].backgroundColor = '#FFA847';
			}
			return total;
		},
		handleProductUpper() {
			this.isProductTop = false;
		},
		// 点击侧边栏
		select(index) {
			this.currentIndex = index;
			this.setScrollH(index);
		},

		// 设置点击侧边栏右边滚动的高度
		setScrollH: function (index) {
			let height = 0;
			const query = uni.createSelectorQuery();
			const foods = query.selectAll('.foods');

			this.$nextTick(() => {
				foods
					.fields(
						{
							size: true,
						},
						(data) => {
							if (index === 0) {
								this.foodSTop = 0;
							}
							for (let i = 0; i < index; i++) {
								height += parseInt(data[i].height);
								// console.log('fh', foods);
								this.foodSTop = height;
								// console.log(that.foodSTop)
							}
						},
					)
					.exec();
			});
		},

		getHeightList() {
			const selectorQuery = uni.createSelectorQuery().in(this);
			selectorQuery.select('.left-content').boundingClientRect((rects) => {
				this.leftIndex = rects.height;
			});
			selectorQuery
				.selectAll('.foods')
				.boundingClientRect((rects) => {
					this.rightHeight = rects.map((item) => item.top);
				})
				.exec();
		},
		myscroll(e) {
			if (e.detail.scrollTop > 20) {
				this.isProductTop = true;
			}
			const rightContentHeight = e.detail.scrollHeight - this.windowsHeight;
			if (rightContentHeight === e.detail.scrollTop) {
				return;
			}
			const { scrollTop } = e.detail + 110; // 110是banner图的高度
			// 判断当前的scrollTop在哪个区间内;
			const now = +new Date();
			if (now - this.last > 100) {
				this.last = now;
				const activeIndex = this.rightHeight.findIndex(
					(value, index, arr) =>
						value <= scrollTop && scrollTop < arr[index + 1],
				);
				this.currentIndex = activeIndex;
				if (this.leftIndex - this.windowsHeight) {
					// 如果有超出部分
					const diff = this.leftIndex - this.windowsHeight;
					this.leftScroll = Math.round(
						(activeIndex * diff) / (this.goods.length - 1),
					);
				}
			}
		},
		handleSkuSelect(data) {
			this.selectArr = data;
		},
		handleOpenSku(item) {
			this.curProduct = item;
			this.$set(this.curProduct, 'shop', this.resData.shop);
			this.$set(this.curProduct, 'shopid', this.resData.shopid);
			this.$refs.popupSku.open();
		},
		// 图片滑动
		handleSwiper(e) {
			this.curSwiper = e.detail.current + 1;
		},
		handleAddCart(data) {
			this.storeGoodsList = [];
			this.goodsList.forEach((item, index) => {
				if (item.id === this.resData.shopid) {
					this.storeGoodsList.push(item);
					this.shopCartIndex = index;
				}
			});
			// 成功的话，调用加入购物车动画
			setTimeout(() => {
				this.$refs.carAnmation.touchOnGoods(data, '185', '135');
			}, 10);
			this.navGroup[1].info = this.allTotal.productNum;
			this.$refs.popupSku.close();
		},
		// 点击底部导航左侧
		handleNavLeft(e) {
			if (e.index === 1) {
				// uni.switchTab({
				// 	url: '../../shopcart/index',
				// });
				if (this.storeGoodsList.length > 0) {
					this.$refs.popupStoreCart.open();
				}
			}
		},
		deleteGoods() {
			this.storeGoodsList = [];
			this.$refs.popupStoreCart.close();
		},
		// 点击底部导航右侧
		handleNavRight(e) {
			if (this.storeAllTotal.checkCount > 0) {
				uni.removeStorageSync('detailsBooking');
				uni.navigateTo({
					url: '../../order/booking/index?storeId=' + this.resData.shopid,
				});
			} else {
				uni.showToast({
					title: '请选择商品',
					duration: 1000,
					icon: 'none',
				});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.page-details {
	background: $uni-bg-color-grey;
	padding: 0 0 110rpx;
	.module-slide {
		position: relative;
	}
	.swiper {
		height: 200rpx;
	}

	.swiper-item {
		height: 200rpx;
		background: #eee;
		text-align: center;
		image {
			height: 200rpx;
		}
	}

	.swiper-tips {
		position: absolute;
		bottom: 24rpx;
		right: 24rpx;
		background: #999;
		font-size: $uni-font-size-sm;
		padding: 4rpx $uni-spacing-base;
		color: $uni-text-color-white;
		border-radius: 40rpx;
	}

	.module-shop {
		background: #fff;
		padding: $uni-spacing-sm 50rpx;
	}

	.module-title {
		padding: 8rpx 0;
		text-align: center;
	}
	.module-shop-content {
		display: flex;
		width: 100%;
		align-items: center;
	}
	.shop-logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: $uni-border-radius-circle;
	}
	.shop-content {
		flex: 1;
		position: relative;
		padding: $uni-spacing-sm 0 $uni-spacing-sm $uni-spacing-base;
		color: $uni-text-color-grey;
	}

	.shop-button {
		background: $uni-color-main;
		position: absolute;
		top: 46rpx;
		right: -12rpx;
		border-radius: 3px;
		padding: 8rpx $uni-spacing-base;
		color: #fff;
		font-size: $uni-font-size-sm;
	}

	.shop-name {
		margin: 0 0 10rpx;
		color: #666;
	}
	.shop-tips {
		margin: 0 0 6rpx;
		font-size: $uni-font-size-sm;
	}
	.product-tips {
		padding: $uni-spacing-sm 0;
		text-align: center;
		font-size: 26rpx;
		color: $uni-text-color-grey;
		line-height: 44rpx;
	}
}
.page-store-info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.module-product {
	.content {
		display: flex;
		width: 100%;
		overflow: hidden;
		transition: all 0.5s;
		position: absolute;
		top: 370rpx;
		bottom: 55px;
		// &.product-top {
		// 	top: 0;
		// }
	}
	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: $uni-color-main;

		.menu-item {
			&:before {
				background: $uni-color-main;
			}
		}
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #fff;
		@include borderCreator(right, solid, $uni-border-color-grey);
	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		&:before {
			background: #fff;
			width: 3px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: 10;
			content: '';
		}
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		background: #fff;
		width: 78%;
	}

	.food-title {
		padding: 20rpx;
	}

	.media {
		display: flex;
		flex-direction: row;
		padding: $uni-spacing-base;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
	}

	.media-object {
		width: 160rpx;
		background: #eee;
		height: auto;
	}

	.media-content {
		flex: 1;
		padding-left: $uni-spacing-base;
	}
	.media-title {
		margin: 0 0 $uni-spacing-sm;
		line-height: 36rpx;
		@include textEllipsis(2);
	}
	.media-tips {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin: 0 0 $uni-spacing-lg;
	}

	.media-count {
		float: right;
		color: $ds-main-color;
		font-size: 24rpx;
	}

	.media-price {
		position: relative;
		color: $uni-text-price;
		font-size: $uni-font-size-base;
	}

	.button-add {
		position: absolute;
		top: 0;
		right: 0;
		width: 48rpx;
		height: 48rpx;
		padding: 0;
		line-height: 46rpx;
		text-align: center;
		font-size: 40rpx;
		border-radius: $uni-border-radius-circle;
	}
}
.store-goods-nav {
	z-index: 100;
	box-shadow: 1px 1px 10px 4px rgba(0, 0, 0, 0.06);
}
.popup-store-cart {
	overflow: auto;
	height: 50%;
}
.product-content {
	padding: $uni-spacing-base 42rpx;
	@include borderCreator(bottom, solid, $uni-border-color-grey);
	text-align: center;
	.media-object {
		background: #eee;
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto 10rpx;
	}
	.media-content {
		padding-left: $uni-spacing-sm;
	}

	.media-title {
		font-size: $uni-font-size-base;
		margin: 0 0 4rpx;
	}

	.media-tips {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}

	.media-count {
		float: right;
		color: $uni-color-main;
	}

	.media-price {
		padding: $uni-spacing-sm 0 0;
		color: $uni-text-price;
		font-size: $uni-font-size-base;
	}
}
.popup-sku {
	.popup-content {
		background: #fff;
		width: 600rpx;
	}
	.module-button {
		display: flex;
		padding: 0 52rpx $uni-spacing-lg;
	}

	.button {
		font-size: 26rpx;
		margin: 0 20rpx;
		width: 50%;
		padding: 5rpx 0;
		border-radius: 20px;
	}

	.button-booking {
		background: #ffa847;
	}

	.sku-number {
		display: flex;
		width: 100%;
		padding: 0 0 38rpx;
		justify-content: center;
	}

	.uni-numbox__value {
		width: 200rpx !important;
	}
}
</style>
